<!DOCTYPE html>
<meta charset="utf-8">
<title>html2json example</title>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG转换工具</title>

    <style>
        #textarea_4,
        #textarea_1,
        #textarea_2 {
            width: 500px;
            height: 200px;
        }
    </style>
</head>

<body>

    <input type="text" id="textarea_1">
    </input>
    <!--  这个放临时假名  -->
    <input type="text" id="textarea_3" placeholder='临时名'>
    </input>
    <div>
        <button id="transformation">转换</button>
    </div>

    <div> 节点列表 </div>
    <textarea type="text" id="textarea_2">
    </textarea>

    <div> 样式列表 </div>
    <textarea type="text" id="textarea_4">
    </textarea>


</body>



<script src="./lib/Pure-JavaScript-HTML5-Parser/htmlparser.js"></script>
<script src="./html2json.js"></script>




<script>


    const textarea_1 = document.getElementById('textarea_1');
    textarea_1.value = `<g stroke="null">         <rect rx="2" id="svg_10" height="3.668686" width="20" y="32.058773" x="9.38297" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(-45 19.382968902587873,33.893115997314446) " />         <rect rx="2" id="svg_32" height="3.668686" width="20" y="32.631839" x="18.099217" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(-45 28.099216461181623,34.46618270874023) " />         <rect rx="2" id="svg_36" height="3.668686" width="20" y="44.968261" x="94.233069" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(135 104.23303985595705,46.80263137817382) " />         <rect rx="2" id="svg_34" height="3.668686" width="20" y="32.523401" x="93.965868" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(-135 103.96576690673828,34.54968261718749) " />         <rect rx="2" id="svg_24" height="3.668686" width="10" y="23.989864" x="75.622726" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(90 80.6227264404297,25.82420730590821) " />         <rect rx="2" id="svg_30" height="3.668686" width="10" y="45.594802" x="75.622726" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(90 80.6227264404297,47.42916107177735) " />         <rect transform="rotate(-90 80.46833801269533,71.81182861328125) " rx="2" id="svg_23" height="3.668686" width="10" y="69.977518" x="75.468406" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" />         <rect rx="2" id="svg_25" height="3.668686" width="30" y="17.045419" x="65.652796" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" />         <rect rx="2" id="svg_16" height="3.668686" width="30" y="60.718258" x="65.746183" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" />         <rect rx="2" id="svg_13" height="3.668686" width="25" y="45.174907" x="47.422305" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(-37.46788787841797 59.92225646972656,47.00924301147462) " />         <rect rx="2" id="svg_15" height="3.668686" width="20" y="38.935563" x="34.007296" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(-45 44.007293701171854,40.769905090332024) " />         <rect rx="2" id="svg_12" height="3.668686" width="20" y="38.984017" x="34.342283" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(45 44.34228515625003,40.81835937499999) " />         <rect rx="2" id="svg_11" height="3.668686" width="20" y="45.525822" x="9.096437" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(45 19.096437454223643,47.36016845703125) " />         <rect rx="2" id="svg_33" height="3.668686" width="20" y="45.419315" x="17.904625" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(45 27.904623031616218,47.25365829467772) " />         <rect rx="2" id="svg_37" height="3.668686" width="20" y="45.004291" x="102.163861" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(-45 112.16390991210935,46.83864212036132) " />         <rect rx="2" id="svg_35" height="3.668686" width="20" y="52.297957" x="93.451362" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" transform="rotate(-135 103.77393341064452,42.611103057861335) " />         <rect id="svg_17" height="4" width="43.234125" y="38.785162" x="0.505926" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" />         <rect id="svg_2" height="4" width="76.149845" y="38.714956" x="68.065681" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" stroke="#000" />         <rect stroke="#000" rx="2" id="svg_31" height="4" width="33.667918" y="38.714956" x="152.840289" fill-opacity="null" stroke-opacity="null" stroke-width="0.5" fill="none" />         <ellipse ry="5.373229" rx="5.64189" id="svg_19" cy="40.794306" cx="80.582489" fill-opacity="null" stroke-opacity="null" stroke-width="5" fill="none" stroke="#000" />         <ellipse ry="5.373229" rx="5.64189" id="svg_21" cy="18.876497" cx="80.656479" fill-opacity="null" stroke-opacity="null" stroke-width="5" fill="none" stroke="#000" />         <ellipse ry="5.373229" rx="5.64189" id="svg_43" cy="62.458435" cx="80.643795" fill-opacity="null" stroke-opacity="null" stroke-width="5" fill="none" stroke="#000" />         <path fill="none" stroke="#000" stroke-width="0.5" stroke-opacity="null" fill-opacity="null" d="m74.1278,71.960392l6.43739,-11.26543l6.43738,11.26543l-12.87477,0z" id="svg_28" />         <ellipse fill="#ff0015" stroke-width="4" cx="132.009466" cy="40.78847" id="svg_38" rx="4" ry="4" stroke="#00ff00" />         <rect fill="#ff0015" stroke-width="0" stroke-opacity="0" fill-opacity="null" x="128.802545" y="45.452114" width="6.521921" height="1.919386" id="svg_44" transform="rotate(90 132.06350708007815,46.4118003845215) " rx="1" stroke="#000000" />         <rect fill="#ff0015" stroke-width="0" stroke-opacity="0" fill-opacity="null" x="126.935378" y="47.705674" width="8.01444" height="1.919386" id="svg_45" rx="1" transform="rotate(33.656856536865234 130.9425964355469,48.66537094116211) " stroke="#000000" />         <rect fill="#ff0015" stroke-width="0" stroke-opacity="0" fill-opacity="null" x="128.241168" y="49.406481" width="6.499735" height="1.919386" id="svg_41" rx="1" stroke="#000000" />         <rect fill="#ffffff" stroke="#00ff00" stroke-width="2" x="125.573881" y="51.72376" width="13" height="13" id="svg_46" rx="1" />         <text fill="#00bfbf" stroke-width="0" x="126.722923" y="127.707733" id="svg_47" font-size="24" font-family="Helvetica, Arial, sans-serif" text-anchor="start" xml:space="preserve" transform="matrix(0.36706377790783346,0,0,0.38117981332108664,80.42786622494728,12.78219338422087) " stroke="#00bfbf">PJ</text>         <path fill="none" stroke-width="3.5" stroke-opacity="null" fill-opacity="null" d="m145.02216,45.980084l5.78266,-10.30177l5.99079,10.30177l-11.77345,0z" id="svg_49" transform="rotate(90 150.90887451171878,40.82920074462892) " stroke="#000" />         <text stroke="#000" transform="matrix(0.3742542305055849,0,0,0.3742542305055849,7.2963978602743635,6.4687453056990485) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="19" id="svg_3" y="29.244198" x="84.54576" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">424-1</text>         <text stroke="#000" transform="matrix(0.4121115841915035,0,0,0.4121115841915035,6.985970221648615,5.08067185249361) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="19" id="svg_4" y="58.468747" x="77.059291" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">1QF</text>         <text stroke="#000" transform="matrix(0.4791487288259475,0,0,0.4791487288259475,37.118464455288475,-2.1933978025355114) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="17" id="svg_6" y="21.060431" x="56.477826" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">1TA 1500/5</text>         <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="8" id="svg_7" y="23.573277" x="160.327437" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">轮转车间</text>         <text stroke="#000" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="7" id="svg_9" y="33.594154" x="160.770076" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">APL3</text>         <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="7" id="svg_14" y="42.350262" x="188.977958" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">轮转机B</text>     </g>`;
    const textarea_2 = document.getElementById('textarea_2');
    const textarea_4 = document.getElementById('textarea_4');
    const transformation_btn = document.getElementById('transformation');
    const textarea_3 = document.getElementById('textarea_3');
    var temp_name = '';
    let attrs = {};


    // viod == 转驼峰命名
    function transformStr(str) {
        var re = /-(\w)/g;
        return str.replace(re, function ($0, $1) {
            return $1.toUpperCase();
        });
    }


    // 递归找子
    function deep(item) {
        for (var i in item) {
            let className = `${item[i]['tag']}_${temp_name}_${i}`;
            item[i]['tagName'] = item[i]['tag'];
            // text 节点需要单独处理一下
            if (item[i]['tagName'] == 'text') {
                let text = '';
                item[i].child.forEach(text_item => {
                    text += text_item.text;
                });
                item[i]['textContent'] = text;
                delete item[i].child;
            }
            item[i]['attrs'] = { class: className };
            if (item[i]['child']) {
                item[i]['children'] = item[i]['child'];
            }
            if (item[i]['attr']) {
                item[i][className] = item[i]['attr'];
            }
            delete item[i].node;
            delete item[i].tag;
            delete item[i].child;
            delete item[i].attr;

            if (item[i][className]) {
                // arr.push(item[i][className]);
                // 更改命名格式
                Object.keys(item[i][className]).forEach(keyName => {
                    if (keyName.indexOf('-') != -1) {

                        if (keyName == 'font-family') {
                            let font = '';
                            item[i][className][keyName].forEach(_ => {
                                font += ` ${_}`;
                            });
                            item[i][className][keyName] = font;
                        }

                        item[i][className][transformStr(keyName)] = item[i][className][keyName];
                        delete item[i][className][keyName];
                    };
                    if (keyName == 'transform') {
                        let transform = '';
                        item[i][className][keyName].forEach(_ => {
                            transform += `${_} `;
                        });
                        item[i][className][keyName] = transform;
                    };
                    if (keyName == 'd') {
                        if (typeof item[i][className][keyName] == 'object') {
                            let d = '';
                            item[i][className][keyName].forEach(_ => {
                                d += `${_} `;
                            });
                            item[i][className][keyName] = d;
                        }

                    }


                })
                attrs[`.${className}`] = item[i][className];
            };

            // 操作完样式表后再给他删了
            if (item[i][className]) {
                delete item[i][className];
            }

            if (item[i].children) {
                deep(item[i].children);
            }
        }

    }

    transformation_btn.onclick = () => {
        temp_name = textarea_3.value;
        if (!temp_name) {
            alert('填写假名');
            return false;
        }
        var html = textarea_1.value;
        html = html.replace(/&nbsp;/g, ' ');//替换HTML空格
        html = html.replace(/\s+/g, " ");   // 去掉空格
        html = html.replace(/> </g, "><");   // 去掉空格
        var item = html2json(html);
        deep(item.child);
        console.log(attrs);
        console.log(item);
        // 写入
        textarea_4.value = JSON.stringify(attrs);
        textarea_2.value = JSON.stringify(item.child);
        console.log('节点信息');
        console.log(item.child);
        console.log('样式表');
        console.log(attrs);
        // textarea_2.value = item.child ;
    }


</script>